<template>
  <el-form ref="course" :model="course">
    <Sticky :class-name="'sub-navbar'">
      <el-button v-loading="loading" type="success" @click="submitForm">
        更新密码
      </el-button>
    </Sticky>
    <div class="detail-container">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="title">
            <MDinput
              v-model="form.passwordOld"
              type="password"
              :max-length="100"
              name="name"
              required
            >
              原密码
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="title">
            <MDinput
              v-model="form.passwordNew"
              type="password"
              :max-length="100"
              name="name"
              required
            >
              现密码
            </MDinput>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import Sticky from '@/components/Sticky'
import MDinput from '@/components/MDinput'
import { passwordUpdate } from '@/api/user'
export default {
  inject: ['reload'],
  components: {
    Sticky,
    MDinput
  },
  data() {
    return {
      loading: false,
      form: {
        passwordOld: '',
        passwordNew: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.lodding = true
      const form = Object.assign({}, this.form)
      passwordUpdate(form).then(response => {
        this.loading = false
        this.$notify({
          title: '成功',
          message: response.msg,
          type: 'success',
          duration: 2000
        })
        this.reload()
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style>
.detail-container {
  padding: 40px 50px 20px;
}
</style>
